Chapter 23: Hosting and Deploying our React Frontend

In this section, we will deploy our React frontend to the Internet to share it with the world. We are going to use

Netlify (netlify.com – fig.1) for our deployment.

Figure 1

Before deploying it to Netlify, we have to replace the localhost:8000 URL in our React project services/todos.js

(since we have already deployed our backend on PythonAnywhere). For example:

Modify Bold Code

getAll(token){

axios.defaults.headers.common["Authorization"] = "Token " + token;

return axios.get('https://greglim.pythonanywhere.com/api/todos/');

}

Do this for all the API calls.

Now, back in netlify.com, create a free account or log in if you already have one.

When you log in, a list will show any deployed apps that you have. In your case, it will be empty since this is

probably your first time deploying on Netlify. At the bottom, there will be a box with the message, “Want to deploy

a new site without connecting to Git? Drag and drop your site output folder here” (fig. 2).

Figure 2

Go back to the Terminal and navigate to the todoapp/frontend folder. Build your React application with the

command:

Execute in Terminal

npm run build

This will create a build version of React that we can deploy on the web. When the build is finished, you will be able